.ganttBox{
   
    margin-top: -30px;
    position: relative;
    .header-button{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .switchButton{
            background: #fff;
            color: #1884EE;
            border: 1px solid #1884ee;
        }
        .switchButton:hover{
            background: #bbdefb ;
            color: #fff;
        }
        .switchButton:active{
            background: #1884EE ;
            color: #fff;
        }
        .activedButton{
            background: #1884EE ;
            color: #fff;
            border: 1px solid #1884ee;
        }
    }
    
    .gantt{
      
        overflow-x: auto;
        border-left: 1px solid #dddee1;
        border-top: 1px solid #dddee1;
        display: flex;
        flex-direction: column;
       .header, .ganttContent{
            display: flex;
            align-items: flex-start;
            .headerText{
                display: flex;
                align-items: center;
                justify-content: center;
                color : #4a4a4a;
                font-size:12px
            }
            .headerMap{
                flex-direction:row;
                justify-content: center;
                align-items: center;
                display: flex;
                flex: 1;
                flex-basis: auto;
            }
            .noContent{
                background: #fff;
                padding: 12px 8px;
                color: #666;
                font-size: 12px;
                position: relative;
                margin-left: 50%;
            }
            .time{
                border: 1px solid #dddee1;
                border-left: 1px solid #dddee1;
                border-bottom: 0px;
                flex-direction: column;
                justify-content:center;
                display: flex;
                flex: 1;
                background: #f3f3f3
            }
       }
       .ganttContent{
            display: flex;
            .childNode{
                flex-direction : row;
                border: 1px solid #dddee1;
                border-top: 0px;
                border-left: 0px;
                .childNodeContainer{
                    display: flex;
                    flex-direction: row;
                    align-items:center;
                    position: relative;
                }
            }
            .ufFlag{
                color: #E51C23;
                position: relative;
                width: 15px;
                padding: 0px;
                top: 10px;
            }
            .leftConnectLine{
                width: 10px;
                height: 25px;
                background: transparent;
                border-left: 1px solid #8C8E8D;
                border-top: 1px solid #8C8E8D;
                display: -webkit-box;
                position: absolute;
                top: 8px;
            }
            .progressItem{
                position: relative;
                height: 20px;
                background: #D4CFD4;
                display: flex;
                margin-top: 15px;
               
                .rightConnectLine{
                    width: 12px;
                    height: 10px;
                    background: transparent;
                    position: relative;
                    border-right: 1px solid #8C8E8D;
                    border-top: 1px solid #8C8E8D;
                    top: 10px;
                    position: absolute;
                }
                .progress{
                    background:#79B8AC;
                    height: 20px;
                    position: absolute;
                }
            }
            
        }
    }
}